/*
 * @Description: 账单详情信息单行
 * @Author: tao.xie
 * @Date: 2019-03-18 15:23:16
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-21 17:14:19
 */

<template>
  <div
    class="info-wrapper flex-h flex-vc"
    :class="centerMsg!==''?'flex-hc':'flex-hsb'"
  >
    <!-- 左边名称 -->
    <span>{{infoName}}</span>
    <!-- 右边按钮 -->
    <button
      class="baseColorNoAcitve"
      v-if="isButton"
      @click="buttonClick()"
    >{{infoValue}}</button>
    <!-- 右边文字 -->
    <span
      v-else
      :class="isInfoValueStress?'info-value-stress':'info-value'"
    >{{infoValue}}</span>
    <span
      v-if="centerMsg!==''"
      class="center-msg"
    >{{centerMsg}}</span>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  props: {
    // 右边区域是否是按钮,默认fale
    isButton: {
      type: Boolean,
      default: false
    },
    // 左边区域的文字内容
    infoName: {
      type: String,
      default: '',
      required: false
    },
    // 右边区域的文字内容
    infoValue: {
      type: String,
      default: '',
      required: false
    },
    // 右边文字是否加重显示
    isInfoValueStress: {
      type: Boolean,
      default: false,
      required: false
    },
    // 当右边是按钮时,点击触发的事件名称
    eventName: {
      type: String,
      default: '',
      required: false
    },
    // 居中显示的文字,当设置的此属性时,居中显示该元素
    centerMsg: {
      type: String,
      default: '',
      required: false
    }
  },
  methods: {
    buttonClick: function () {
      Vue.$EventBus.$emit(this.eventName)
    }
  }
}
</script>

<style scoped>
/*最外层包裹*/
.info-wrapper {
  width: 690px;
  height: 90px;
}
/*左边span元素*/
.info-wrapper > span:first-of-type {
  color: #999;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
/*右边按钮元素*/
.info-wrapper > button:first-of-type {
  background: none;
  border: none;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
/*右边span元素*/
.info-value {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
/*右边span元素加重显示*/
.info-value-stress {
  color: #333;
  font-size: 20px; /*no*/
  line-height: 28px; /*no*/
}
/**中间的文字*/
.center-msg {
  color: #999;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
</style>
